<template>
  <div class="contentDiv">
    <div v-for="item in dragStore.contentData" :key="item.key">
      <component :is="item.key"></component>
    </div>

    <div class="p-15">
      <z-form ref="formRef" :formObjData="formObj">
        <template v-slot:name>
          <a-input v-model:value="formObj.formModal.name" />
        </template>
        <template v-slot:selectValue>
          <a-select
            ref="select"
            v-model:value="formObj.formModal.selectValue"
            placeholder="选择城市"
            style="width: 120px"
            show-search
            :options="selectOptions"
            :filter-option="filterOption"
            @change="selectChange"
          >
          </a-select>
        </template>
      </z-form>
      <a-button type="primary" @click="submitForm">提交</a-button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive,getCurrentInstance } from "vue";
import { useDraggableStore } from "@/store/draggable.js";
import zForm from "@/components/Form/index.vue";
const { proxy } = getCurrentInstance();
const dragStore = useDraggableStore();

const formModal = ref({
  name: "",
  selectValue: undefined,
});
const rules = ref({
  name: {
    required: true,
    min: 3,
    max: 36,
    message: "用户名长度需为3~36之间",
  },
});

const formObj = reactive({
  rules: rules,
  formModal: formModal,
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
  uploadFlag: false,
  uploadSpinning: false,
  ref: "formRef",
});

//选择器
const selectOptions = ref([
  {
    value: "1",
    label: "Jack",
  },
  {
    value: "2",
    label: "Lucy",
  },
]);
const filterOption = (input, option) => {
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const selectChange = (value) => {
  formState.selectValue = value;
};
const formRef = ref();

const submitForm = () => {
  console.log(formRef.value);
  // formRef.value
    // .validate()
    // .then(() => {
      
    // })
    // .catch((error) => {
     
    // });
};
</script>

<style lang="scss" scoped></style>
